<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	const newsData = ref([])
	onMounted(() => {
		newsData.value = uni.getStorageSync('newsData')
	})

	const rowNum = ref(Math.ceil(newsData.length / 3))
	const rowHeight = ref((100 / rowNum) / 100)
	function movClick(){
		uni.showToast({
			title: 'qwe'
		})
	}
</script>

<template>
	<view class="pba page">
		<view>
			公益活动
		</view>
		<view>
			<movable-area style="width: 60vw; height: 60vw; background-color: white; ">
				<view style="display: grid; grid-template-columns: repeat(2, 50%);">
					<movable-view style="width: 10vw; height: 10vw; background-color: #d4237a; border-radius: 50%;" direction="all" @click="movClick">

					</movable-view>
					<movable-view style="width: 10vw; height: 10vw; background-color: #8a8a8a; border-radius: 50%;" direction="all">

					</movable-view>
				</view>

			</movable-area>
		</view>
		<!-- <movable-area>
			<view class="nav" :style="{'grid-template-rows': `repeat(${rowNum}, ${rowHeight}`}">
				<view class="column" v-for="(item, index) in newsData" :key="index"
					@click="$emit('navItemClick', index)">
					<image :src="item.imagePath"></image>
					<text> {{ item.title }}</text>
				</view>
			</view>
		</movable-area> -->
	</view>
</template>

<style scoped lang="scss">
	.pba {
		.nav {
			width: 100%;
			min-height: 14vh;
			padding: 2vh 0;
			background-color: $uni-bg-color;
			border-radius: $uni-border-radius;
			display: grid;
			grid-template-columns: repeat(3, 33%);
			// grid-template-rows: repeat(2, 50%);
			grid-gap: 2vh 0;

			.column {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 12vw;
					height: 12vw;
					border-radius: 50%;
					overflow: hidden;
					margin-bottom: 1vh;
				}
			}
		}
	}
</style>